<template>
  <div id="userOutlinedPage">
    <a-form :model="loginUser" name="nest-messages" :label-col="{ span: 8 }" @finish="onFinish">
      <a-form-item name="userAvatar" label="头像">
        <AImage :src="loginUser.userAvatar" style="width: 120px"></AImage>
      </a-form-item>
      <a-form-item name="userName" label="用户名">
        <a-input v-model:value="loginUser.userName" />
      </a-form-item>
      <a-form-item name="userAccount" label="账号" >
        <a-input v-model:value="loginUser.userAccount"  :disabled="true"/>
      </a-form-item>
      <a-form-item label="个人简介" name="userprofile">
        <a-textarea v-model:value="loginUser.userprofile" />
      </a-form-item>
<!--      <a-form-item>-->
<!--        <a-button type="primary" html-type="submit">Submit</a-button>-->
<!--      </a-form-item>-->
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { useLoginUserStores } from '@/stores/useLoginUserStores.ts'
import { ref } from 'vue'

const loginUserStore = useLoginUserStores()
const loginUser = loginUserStore.loginUser

const onFinish = (values: any) => {
  console.log('Success:', values)
}
</script>

<style scoped>
#userOutlinedPage {
  max-width: 500px;
  margin: 0 auto;
}
</style>
